<template>
    <div class="myInfo">
      <nav-bar title="我的资料" path="/home/my"></nav-bar>
      <div class="content">
        <my-cell title="头像" :value="userInfo.avatar" type="image" class="avatar" @click.native="goEditInfo('avatar')"></my-cell>
        <div class="info">
          <my-cell title="昵称" :value="userInfo.nickname" @click.native="goEditInfo('nickname')"></my-cell>
          <my-cell title="性别" :value="genderObj[userInfo.gender]" @click.native="showGender = true"></my-cell>
          <my-cell title="地区" :value="area.city_list[userInfo.area]" @click.native="showArea = true"></my-cell>
          <my-cell title="个人简介" :value="userInfo.intro" @click.native="goEditInfo('intro')"></my-cell>
        </div>
        <van-button type="primary" block color="#fff" class="btn" @click="exit"><span>退出登录</span></van-button>
      </div>
      <van-popup v-model="showGender" position="bottom">
        <van-picker
          v-if="bol"
          title="性别"
          show-toolbar
          :columns="Object.values(genderObj)"
          :default-index="userInfo.gender"
          @confirm="onGenderConfirm"
          @cancel="showGender = false"
        />
      </van-popup>
      <van-popup v-model="showArea" position="bottom">
        <van-area
          title="标题"
          :area-list="area"
          :columns-num="2"
          :value="userInfo.area"
          @confirm="onAreaConfirm"
          @cancel="showArea = false"/>
      </van-popup>
    </div>
</template>

<script>
import myCell from './myCell'
import { mapState } from 'vuex'
import area from '@/assets/js/area'
import { Dialog } from 'vant'
import { removeLocal } from '@/utils/local'
import { auEdit } from '@/api/my'

export default {
  name: 'myInfo',
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      showGender: false,
      showArea: false,
      area: area,
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      },
      bol: true
    }
  },
  watch: {
    showGender () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    showArea () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  },
  mounted () {
    document.querySelector('body').style.backgroundColor = '#f7f4f5'
  },
  beforeDestroy () {
    document.querySelector('body').style.backgroundColor = '#fff'
  },
  methods: {
    exit () {
      Dialog.confirm({
        title: '提示',
        message: '您确定退出该网站吗?'
      })
        .then(() => {
          // on confirm
          removeLocal('token')
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    onGenderConfirm (value, index) {
      this.showGender = false
      this.editInfo({ gender: index })
    },
    onAreaConfirm (value, index) {
      this.showArea = false
      this.editInfo({ area: value[1].code })
    },
    editInfo (obj) {
      this.$toast.loading({
        duration: 0
      })
      auEdit(obj).then(() => {
        this.$toast.success('修改资料成功')
        // 调用仓库异步方法刷新数据
        this.$store.dispatch('refreshUserInfo')
      }).catch(() => {})
    },
    goEditInfo (type) {
      this.$router.push('/home/editInfo?type=' + type)
    }
  }
}
</script>

<style lang="less" scoped>
  .myInfo {
    background-color: #f7f4f5;
    .content {
      padding: 16px @p15 0;
      .avatar {
        background: #ffffff;
        border-radius: 8px;
      }
      .info {
        overflow: hidden;
        border-radius: 8px;
        margin: 10px 0 15px;
      }
      .btn {
        border-radius: 8px;
        span {
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #e40137;
          line-height: 22px;
          letter-spacing: 0px;
        }
      }
    }
  }
</style>
